import React, { useState, useEffect } from 'react'
import { Outlet, useNavigate } from "react-router-dom"
import "./layouts.less"

const TabBar = () => {
    const tabObj = {
        color: "#fff",
        selectColor: "#f8d61e",
        tabList: [
            {
                tabHref: "/layouts/brushingVideos",
                title: "首页",
                flagTab: true
            },
            {
                tabHref: "/layouts/discover",
                title: "发现",
                flagTab: true
            },
            {
                tabHref: "/publish",
                title: "发布",
            },
            {
                tabHref: "/layouts/information",
                title: "消息",
                flagTab: true
            },
            {
                tabHref: "/layouts/user",
                title: "我",
                flagTab: true
            },
        ]
    }
    const navigate = useNavigate()
    const [tabVal, setTabVal] = useState("/layouts/brushingVideos")
    useEffect(() => {
        navigate(tabVal)
    }, [tabVal])
    return (
        <>
            <div className="footerB">
                {
                    tabObj.tabList.map((item, index) => {
                        const flag = item.flagTab ?
                            <div
                                className={`${item.tabHref == tabVal ? "tabs" : "tabBlack"}`}
                                key={index}
                                onClick={() => { setTabVal(item.tabHref) }}
                            >
                                {item.title}
                            </div> :
                            <div
                                className="family"
                                key={index}
                                onClick={() => { setTabVal(item.tabHref) }}
                            >+</div>
                        return flag
                    })
                }
            </div>
        </>
    )
}

export default function Layouts() {
    return (
        <div id="main-lay">
            <div className="headerA">
                <Outlet />
            </div>
            <TabBar />
        </div>
    )
}
